<script setup lang="ts">
import type { VxeGridInstance, VxeGridListeners, VxeGridProps } from 'vxe-table'

import { userAuthInfo } from '@fl/api/iam-api'
import { flowHttp } from '@fl/api/work-flow'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

type seachOrderBtnTy = {
    id: number | string
    text: string
}
type seachDataTy = {
    CreatedName?: string
    shangjspzt?: number | string
    suosqy?: string
    xiangmdjbh?: string
    xiangmmcxq?: string
    xingzqh?: string

}
// 搜索
const seachData = reactive<seachDataTy>({
    CreatedName: '',
    shangjspzt: '',
    suosqy: '',
    xiangmdjbh: '',
    xiangmmcxq: '',
    xingzqh: '',
})
// 重置
function reset() {
    seachData.CreatedName = ''
    seachData.shangjspzt = ''
    seachData.suosqy = ''
    seachData.xiangmdjbh = ''
    seachData.xiangmmcxq = ''
    seachData.xingzqh = ''
    btnId.value = '4'
    getData()
}
const xGrid = ref<VxeGridInstance<any>>()
// 表单数据主要参数
const gridOptions = reactive<any>({
    border: true,
    columnConfig: {
        resizable: true,
    },
    columns: [
        { type: 'checkbox', width: 50 },
        { field: 'xiangmmcxq', title: '项目名称' },
        { field: 'xiangmdjbh', title: '项目登记编号' },
        { field: 'shangjspzt', slots: { default: 'tag_default' }, title: '上架审批状态' },
        { field: 'suosqy', title: '所属运营企业' },
        { field: 'xingzqh', title: '行政区别' },
        { field: 'xiangmdz', title: '项目地址' },
        { field: 'CreatedName', title: '创建人' },
        { field: 'CreatedTime', title: '创建时间' },
        { slots: { default: 'operate' }, title: '操作', width: 300 },
    ],
    data: [],
    editConfig: {
        mode: 'row',
        showStatus: true,
        trigger: 'manual',
    },
    height: 530,
    keepSource: true,
    loading: false,
    pagerConfig: {
        currentPage: 1,
        enabled: true,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100, 200, 500],
        total: 0,
    },
    showOverflow: true,
})
const gridEvents: VxeGridListeners<any> = {
    pageChange({ currentPage, pageSize }) {
        if (gridOptions.pagerConfig) {
            gridOptions.pagerConfig.currentPage = currentPage
            gridOptions.pagerConfig.pageSize = pageSize
        }
        getData()
    },
}
getData()
// 获取列表数据
async function getData() {
    gridOptions.loading = true
    flowHttp('query', {
        body: {
            data: {
                code: 'd83785a4021bb76c',
                filter: useFilter(seachData),
                pageInfo: {
                    page: `${gridOptions.pagerConfig.currentPage}`,
                    size: `${gridOptions.pagerConfig.pageSize}`,
                },
                requireCount: '1',
            },
        },
    }).then((res: any) => {
        console.log('🚀 ~ getData ~ res:', res)
        gridOptions.loading = false
        const { Datas, PagingInfo } = res.data.data
        gridOptions.pagerConfig.total = PagingInfo.DataCount

        gridOptions.data = Datas

        // TODO：前端查询
        // const filterData = useQuery(data, seachData)
        // console.log('前端查询---', filterData)

        // 前端分页
        // const { list, total } = usePage(filterData, gridOptions)
    })
}
// 查询接口参数处理
function useFilter(form: any) {
    const arr: any = []
    for (const key in form) {
        if (Object.prototype.hasOwnProperty.call(form, key)) {
            if (form[key] !== undefined && form[key] !== null && form[key] !== '') {
                arr.push({
                    filed: key,
                    value: form[key],
                })
            }
        }
    }
    return arr
}
// 订单按钮集合
const orderBtn = reactive<seachOrderBtnTy[]>([
    {
        id: '4',
        text: '全部',
    },
    {
        id: '1',
        text: '审批中',
    },
    {
        id: '2',
        text: '通过',
    },
    {
        id: '3',
        text: '驳回',
    },
])
// 搜索审批状态按钮函数
let btnId = ref('4')
function orderCheckBtnFn(text: string, id: any) {
    if (text === '全部')
        seachData.shangjspzt = ''

    else
        seachData.shangjspzt = text

    btnId.value = id

    getData()
}
// 处理下拉框
function changeSelect(val: any) {
    btnId.value = val
    if (val === '1') {
        seachData.shangjspzt = '审批中'
    }
    else if (val === '2') {
        seachData.shangjspzt = '通过'
    }
    else if (val === '3') {
        seachData.shangjspzt = '驳回'
    }
    else {
        seachData.shangjspzt = ''
        btnId.value = '4'
    }
}
const router = useRouter()
// 跳转详情
function toViweOrder(row: any) {
    router.replace({
        path: '/house-source-center/lease-approval/project-detail',
        query: {
            row: JSON.stringify(row),
        },
    })
}
// 获取s2工作流token
function init() {
    userAuthInfo().then((res) => {
        console.log('userAuthInfo---', res)
        window.sessionStorage.setItem('USER_ID', res.id)
    })

    getData()
}
init()
</script>

<template>
    <div class="seach">
        <div class="seach-header">
            <el-form inline
                     class="form"
            >
                <el-form-item label="项目名称">
                    <el-input v-model="seachData.xiangmmcxq"
                              type="text"
                              width="260"
                              placeholder="请输入项目名称"
                              clearable
                    />
                </el-form-item>

                <el-form-item label="行政区划">
                    <el-input v-model="seachData.xingzqh"
                              type="text"
                              placeholder="请输入行政区划"
                              clearable
                    />
                </el-form-item>

                <el-form-item label="所属企业">
                    <el-input v-model="seachData.suosqy"
                              type="text"
                              clearable
                              placeholder="请输入所属企业"
                    />
                </el-form-item>

                <el-form-item label="项目登记编号">
                    <el-input v-model="seachData.xiangmdjbh"
                              type="text"
                              clearable
                              placeholder="请输入项目登记编号"
                    />
                </el-form-item>

                <el-form-item label="创建人">
                    <el-input v-model="seachData.CreatedName"
                              type="text"
                              clearable
                              placeholder="请输入创建人"
                    />
                </el-form-item>

                <el-form-item label="上架审批状态">
                    <el-select v-model="seachData.shangjspzt"
                               style="width:150px"
                               clearable
                               placeholder="请选择订单状态"
                               @change="changeSelect(seachData.shangjspzt)"
                    >
                        <el-option label="全部"
                                   value=""
                        />

                        <el-option label="审批中"
                                   value="1"
                        />

                        <el-option label="通过"
                                   value="2"
                        />

                        <el-option label="驳回"
                                   value="3"
                        />
                    </el-select>
                </el-form-item>
            </el-form>

            <div class="form-btn">
                <el-button color="#DA0004"
                           @click="getData"
                >
                    搜索
                </el-button>

                <el-button @click="reset">
                    重置
                </el-button>
            </div>
        </div>

        <div class="order-btn">
            <label style="margin-right:20px">上架审批状态</label>

            <el-button v-for="item in orderBtn"
                       :key="item.id"
                       size="small"
                       :color="item.id === btnId ? '#DA0004' : ''"
                       @click="orderCheckBtnFn(item.text, item.id)"
            >
                {{ item.text }}
            </el-button>
        </div>
    </div>

    <div class="order-list">
        <div class="list-btn">
            <el-button size="small"
                       plain
                       color="#DA0004"
            >
                批量审批
            </el-button>
        </div>

        <div class="list">
            <vxe-grid ref="xGrid"
                      v-bind="gridOptions"
                      v-on="gridEvents"
            >
                <template #tag_default="{ row }">
                    <el-tag v-if="row.shangjspzt === '驳回'"
                            type="danger"
                    >
                        驳回
                    </el-tag>

                    <el-tag v-else-if="row.shangjspzt === '通过'"
                            type="success"
                    >
                        通过
                    </el-tag>

                    <el-tag v-else-if="row.shangjspzt === '审批中'"
                            type="warning"
                    >
                        审批中
                    </el-tag>
                </template>

                <template #operate="{ row }">
                    <vxe-button size="mini"
                                content="项目详情"
                                type="text"
                                style="color:#DA0004"
                                @click="toViweOrder(row)"
                    />

                    <vxe-button size="mini"
                                content="审批详情"
                                type="text"
                    />

                    <vxe-button size="mini"
                                content="审批"
                                type="text"
                    />

                    <vxe-button size="mini"
                                content="驳回"
                                type="text"
                    />
                </template>
            </vxe-grid>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .seach {
    min-height: 145px;
    background-color: #fff;
    padding: 20px;

    .order-btn {
        margin-top: 20px;
        font-size: 12px;
    }
}

.order-list {
    margin-top: 20px;
    padding: 30px;
    background: #fff;

    .list-btn {
        margin-bottom: 20px;
    }
}

.pag {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    padding: 0 13px;
}

.seach-header {
    display: flex;
    border-bottom: 1px solid #cdcdd4;

    .form {
        flex: 1;
    }

    .form-btn {
        flex: 0 0 13%;
    }
}

:deep(.el-form .el-form-item .el-form-item__label) {
    font-size: 12px;
}

:deep(.el-table__row .el-table__cell .cell) {
    padding: 12px 16px;

    // line-height: 8px;
    // color: #E5E6EB;
    font-size: 12px;
}

:deep(.el-table__header .el-table__cell .cell) {
    font-family: 'PingFang SC';
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0;
    text-align: left;
    color: #86909c;
}
</style>
